<script setup lang="ts">
import { Environment } from '@/api/code/environment/type';
import MonacoEditor from './MonacoEditor.vue';
import Header from './Header.vue';
import { ref, Ref, watch } from 'vue';
import * as monaco from 'monaco-editor'
import { runCode } from '@/api/code';
import Close from '@/components/icons/code/Close.vue';
import ExecuteTerm from './ExecuteTerm.vue';
import { CodeContent } from '@/api/code/type';
import { listen } from '@tauri-apps/api/event';
const codeId = defineModel("codeId") as Ref<string>;
const environment = defineModel() as Ref<Environment>;
const codeContent = defineModel("codeContent") as Ref<CodeContent>;
const options = ref({} as monaco.editor.IStandaloneEditorConstructionOptions);
const show = ref(false);
const showContent = ref('');
const anchors = [
    100,
    Math.round(0.4 * window.innerHeight),
    Math.round(0.7 * window.innerHeight),
];
const height = ref(anchors[0]);
watch(environment, () => {
    if (environment.value.type != undefined && environment.value.type != null) {
        options.value.language = environment.value.type;
    }
});
const run = () => {
    showContent.value = '';
    runCode(codeId.value, codeContent.value.content);
    show.value = true;
}

listen<String>('/execute/message', async (event) => {
    const a = event.payload.replace(/[\r\n]/g, "");
    const b = codeContent.value.content.replace(/[\r\n]/g, "");
    if (a.includes(b) && (a.length - b.length) <= 5) {
        return;
    }
    showContent.value = showContent.value + event.payload;
})

</script>

<template>
    <div class="container">
        <Header class="header" @run="run" v-model:codeId="codeId" v-model:name="environment.name"
            v-model:codeContent="codeContent" v-model:termContent="showContent" />
        <MonacoEditor v-model:content="codeContent.content" class="editor" />
        <van-floating-panel v-if="show" :content-draggable="false" v-model:height="height" :anchors="anchors">
            <div class="term">
                <ExecuteTerm v-model="showContent"></ExecuteTerm>
            </div>
            <template #header>
                <div class="panel-header">
                    <p>运行结果</p>
                    <Close class="icon" style="width: 20px;height: 20px;" @click="show = false" />
                </div>
            </template>
        </van-floating-panel>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;

    .header {
        height: 50px;
        background-color: black;
    }

    .editor {
        width: calc(100%);
        height: calc(100% - 50px);
    }
}

.term {
    background-color: black;
    height: 100%;
    width: 100%;
    display: flex;
}

.panel-header {
    height: 30px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.756);
    display: flex;
    border-radius: 0%;
    justify-content: center;
    align-items: center;
    position: relative;

    p {
        margin: 0px;
        color: white;
    }

    .icon {
        position: absolute;
        right: 10px;
    }
}
</style>